<template>
  <div>
    <div class="h_header flexrowbetween">
      <span>数据看版</span>
      <div class="flex aligncenter">
        <div
          v-for="(item, index) in days"
          :key="index"
          class="dataname f-14 commhover"
          :class="{ active: daynum == item.value }"
          @click="handleClick(item)"
        >
          {{ item.name }}
        </div>
        <el-date-picker class="mr_10"
          v-model="time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime">
        </el-date-picker>
        <el-date-picker
          v-model="time1"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="对比开始日期"
          end-placeholder="对比结束日期"
          @change="changeTime1">
        </el-date-picker>
      </div>
    </div>
    <el-row :gutter="25" class="h_content" v-loading='loading'>
      <el-col :span="25">
        <div class="bg_box">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}总广告位</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.plan.now}}</div>
              <div class="f-14 c_fff mb_5">月环比 
                <i v-if="rate1>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate1}}%
              </div>
              <div class="f-14 c_fff mb_5">日均花费 ￥233</div>
            </div>
            <div>
              <img src="@/assets/images/r1.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg1">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}流量数据点击量</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.click.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比 
                <i v-if="rate2>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate2}}%</div>
            </div>
            <div>
              <img src="@/assets/images/r2.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg2">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}流量数据展示量</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.get.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">
                月环比 
                <i v-if="rate3>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate3}}%
              </div>
              <!-- <div class="f-14 c_fff mb_5">今日点击量</div> -->
            </div>
            <div>
              <img src="@/assets/images/r3.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg3">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}充值收益</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.pay.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比
                <i v-if="rate4>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                <!-- <i class="el-icon-top c_34FF5B"></i> -->
                {{rate4}}%
              </div>
            </div>
            <div>
              <img src="@/assets/images/r4.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="25">
        <div class="bg_box bg3">
          <div class="f-14 c_fff pb_10 box_h">{{dayname}}消耗收益</div>
          <div class="flexrowbetween alignend">
            <div class="box_l">
              <div class="f-30 c_fff h_num">{{dataInfo.use.now}}</div>
              <div class="f-14 c_fff mb_5 mt_30">月环比 
                <i v-if="rate5>=0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{rate5}}%
              </div>
            </div>
            <div>
              <img src="@/assets/images/r5.png" alt="" class="box_rimg">
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { dataDayList } from '@/api/home'
import { time_date } from '@/utils/validate'
export default {
  data() {
    return {
      loading:false,
      days: [
        { name: "今日", value: 1 },
        { name: "本周", value: 2 },
        { name: "本月", value: 3 },
        { name: "全年", value: 4 },
      ],
      daynum: 1,
      dayname:'今日',
      time:'',
      time1:'',
      dataInfo:{
        click:{now:'',old:''},
        get:{now:'',old:''},
        pay:{now:'',old:''},
        plan:{now:'',old:''},
        use:{now:'',old:''},
      },
      rate1:'',
      rate2:'',
      rate3:'',
      rate4:'',
      rate5:'',
    };
  },
  props: {
    title: {
      default: "",
    },
  },
  created(){
    this.getInfo()
  },
  methods: {
    handleClick(item) {
      this.daynum = item.value;
      this.dayname = item.name
      this.getInfo()
    },

    changeTime(){
      if(this.time  && this.time1 ){
        this.daynum = ''
        this.getInfo()
      }
    },

    changeTime1(){
      console.log(this.time, this.time1)
      if(this.time && this.time1){
        this.daynum = ''
        this.getInfo()
      }
    },

    getInfo(){
      this.loading = true
      let params = {
        now_start:'',
        now_end:"",
        old_start:'',
        old_end:''
      }
      if(this.time && this.time1){
        params.now_start = this.time[0]
        params.now_end = this.time[1]
        params.old_start = this.time1[0]
        params.old_end = this.time1[1]
      }
      if(this.daynum == 1){
        params.now_start = this.parseTime(time_date(1).start)
        params.now_end = this.parseTime(time_date(1).end)
        params.old_start = this.parseTime(time_date(-1).start)
        params.old_end = this.parseTime(time_date(-1).end)
      }
      // 本周
      if(this.daynum == 2){
        params.now_start = this.parseTime(time_date(7).start)
        params.now_end = this.parseTime(time_date(7).end)
        params.old_start = this.parseTime(time_date(-7).start)
        params.old_end = this.parseTime(time_date(-7).end)
      }
      // 本月
      if(this.daynum == 3){
        params.now_start = this.parseTime(time_date(30).start)
        params.now_end = this.parseTime(time_date(30).end)
        params.old_start = this.parseTime(time_date(-30).start)
        params.old_end = this.parseTime(time_date(-30).end)
      }
      // 全月
      if(this.daynum == 4){
        params.now_start = this.parseTime(time_date(365).start)
        params.now_end = this.parseTime(time_date(365).end)
        params.old_start = this.parseTime(time_date(-365).start)
        params.old_end = this.parseTime(time_date(-365).end)
      }
      console.log('昨天',params)
      dataDayList(params).then(res=>{
        this.loading = false
        this.dataInfo = res.data
        // 广告率
        let plan = this.dataInfo.plan
        if(plan.old == 0){
          this.rate1 = 0
        }else{
          this.rate1 = ((plan.now - plan.old)/plan.old).toFixed(4)*100
        }
        // 点击率
        let click = this.dataInfo.click
        if(click.old == 0){
          this.rate2 = 0
        }else{
          this.rate2 = ((click.now - click.old)/click.old).toFixed(4)*100
        }
        // 展示率
        let get = this.dataInfo.get
        if(get.old == 0){
          this.rate3 = 0
        }else{
          this.rate3 = ((get.now - get.old)/get.old).toFixed(4)*100
        }
        // 充值收益
        let pay = this.dataInfo.pay
        if(pay.old == 0){
          this.rate4 = 0
        }else{
          this.rate4 = ((pay.now - pay.old)/pay.old).toFixed(4)*100
        }
        // 消耗收益
        let user = this.dataInfo.use
        if(user.old == 0){
          this.rate5 = 0
        }else{
          this.rate5 = ((user.now - user.old)/user.old).toFixed(4)*100
        }
      }).catch(()=>{
        this.loading = false
      })
      this.loading = false
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}
.dataname {
  margin-right: 18px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
.h_content{
  padding: 25px;
}
.el-col-25{
  width: 20%;
}
.bg_box{
  width: 100%;
  height: 160px;
  background: url('~@/assets/images/resf1.png') no-repeat;
  background-size: 100% 100%;
  padding: 15px 18px;
}
// .bg1{
//   background: url('~@/assets/images/resf2.png') no-repeat;
//   background-size: 100% 100%;
// }
// .bg2{
//   background: url('~@/assets/images/resf3.png') no-repeat;
//   background-size: 100% 100%;
// }
// .bg3{
//   background: url('~@/assets/images/resf4.png') no-repeat;
//   background-size: 100% 100%;
// }
// .bg4{
//   background: url('~@/assets/images/resf5.png') no-repeat;
//   background-size: 100% 100%;
// }
.box_h{
  border-bottom: 1px solid #fff;
}
.box_l{
  width: calc(100% - 60px);
}
.box_rimg{
  width: 60px;
  height: 60px;
}
.h_num{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>